<!doctype html>
<html lang="en">

<%@ include file="Include_Professor_Imports.jsp"%>

<head>
	<script>
		var studentsRow = new Array();
		var questionsRow = new Array();
		var examsRow = new Array();
		function checkChosenExam(){

			var chosenExam = document.getElementById("getid0");
			if(chosenExam.value == 0){
				alert('Please first select an exam or a set of exams.');
				return false;
			}
			
		}

		function checkForm()
		{
			var examName = document.getElementById("examName");
			var examDuration = document.getElementById("examDuration");
			var examPassing = document.getElementById("examPassing");
			var intExp = /^\d+$/;	
			var floatExp = /^[-+]?[0-9]+(\.[0-9]+)?$/;

			if (examName.value == '' || examName.value.indexOf('\\') !== -1 || examName.value.indexOf('\'') !== -1 || examName.value.indexOf('\"') !== -1)
			{
				alert('Please enter a valid Exam Name.');
				return false;
			} 
			
			if (!examDuration.value.match(intExp)|| examDuration.value == '' || examDuration.value.indexOf('\\') !== -1 || examDuration.value.indexOf('\'') !== -1 || examDuration.value.indexOf('\"') !== -1)
			{
				alert('Please enter a valid Exam Duration.');
				return false;
			} 
			if (examPassing.value<0 || examPassing.value>100 || !examPassing.value.match(floatExp) || examPassing.value == '' || examPassing.value.indexOf('\\') !== -1 || examPassing.value.indexOf('\'') !== -1 || examPassing.value.indexOf('\"') !== -1)
			{
				alert('Please enter a valid Exam Passing Grade.');
				return false;
			} 
			return true;
		}
		function resetNewLiveExamForm(){
			var examName = document.getElementById("examName");
			var examDuration = document.getElementById("examDuration");
			var examPassing = document.getElementById("examPassing");
			examName.value = "";
			examDuration.value = "";
			examPassing.value = "";
			document.getElementById("getid2").value = 0;
			document.getElementById("getid").value = 0;
			
			studentsRow = new Array();
			questionsRow = new Array();
			
			var table1 = document.getElementById("questionTable");
			var tds1 = table1.getElementsByTagName("td");
			for (var i = 0; i < tds1.length; i++) {
			  tds1[i].className = "unselected";
			}
			
			var table2 = document.getElementById("studentTable");
			var tds2 = table2.getElementsByTagName("td");
			for (var i = 0; i < tds2.length; i++) {
			  tds2[i].className = "unselected";
			}
			alert('Successful Reset of New Live Exam Form');
		}
	</script>
</head>
<body>
<!-- HEADER -->
<div style="position: fixed; width: 100%; z-index: 1;">
<%@ include file="Include_Professor_Header.jsp"%>

	<%@ include file="Include_Design_Table.jsp"%> 
<section id="secondary_bar">
<div class="user"><!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container"><article class="breadcrumbs"><a
	href="ProfessorHomeServlet">Home</a>
<div class="breadcrumb_divider"></div>
<a class="current">Live Exams</a></article></div>
</section>
<!-- end of secondary bar -->
</div>
<%@ include file="Include_Professor_Menu.jsp"%>

<section id="main" class="column">

<%@ include file="Include_Professor_Message.jsp"%>

<c:set var="questions" value="${requestScope.questions}"></c:set>
<c:set var="categories" value="${requestScope.categories}" ></c:set>

<div class="tablemodule" >
	<div style="max-height: 400px; overflow: auto;">
		<h5>Live Exams <div style="">Search: <input name="filt" onKeyUp="filter2(this, 'examTable', '1')" type="text"></div></h5>
		<table class="tablesorter" id="examTable" cellspacing="0">
			<thead>
				<tr>
					<th>Exam ID</th>
					<th>Exam Name</th>
					<th># of Items</th>
					<th>Duration</th>
					<th>Passing</th>
					<th>Categories</th>
					<th>Status</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody>
			
				<c:forEach items="${sessionScope.professor.exams}" var="exam" varStatus="i">
			
					<tr onclick="multiplehighlight_8(this, objinput0, examsRow)">
						<td><c:out value="${exam.examID }"/></td>
						<td><c:out value="${exam.examName }"/> </td>
						<td><c:out value="${exam.questions.size() }"/> </td>
						<td><c:out value="${exam.duration }"/></td>
						<td><c:out value="${exam.passingPercent }"/></td>
						<td>
							<c:forEach items="${categories[i.index]}" var="category" varStatus="j" >
							
								<c:choose>
									<c:when test="${categories[i.index].size() eq j.count}">
										<c:out value="${ category }" />
									</c:when>
									<c:otherwise>
										<c:out value="${category}," />
									</c:otherwise>
								</c:choose>
					
							</c:forEach>
						</td>
						<td>
							<c:choose>
								<c:when test="${exam.activated}">
									<a style="visibility: hidden;">A</a><input type="image" value="a" src="${pageContext.request.contextPath}/images/icn_alert_success.png" title="Activated" style="border-style: none">
								</c:when>
								<c:otherwise>
									<a style="visibility: hidden;">D</a><input type="image" value="b" src="${pageContext.request.contextPath}/images/icn_security.png" title="Locked" style="border-style: none">
								</c:otherwise>
							</c:choose>
						</td>
						<td>
							<a href="PreEditExamServlet?examID=${exam.examID }&type=Real"><img src="${pageContext.request.contextPath}/images/icn_edit.png" title="Edit" style="border-style: none"/></a>
						</td>
					</tr>	
				</c:forEach>
			
			</tbody>
		</table>
	</div>
	<form action="ChangeExamStatusServlet" method="post">
		<input type="hidden" id="getid0" name="examIDs" value="0"/>
		<script>var objinput0 = document.getElementById("getid0");</script>
<!--		<select style="margin-left: 20px;" name="mode">-->
<!--			<option value="Activate">Activate</option>-->
<!--			<option value="Deactivate">Deactivate</option>-->
<!--		</select>-->
		<input style="margin-left: 20px;" type="radio" name="mode" value="Activate" checked="checked">Activate</input>
		<input type="radio" name="mode" value="Deactivate">Deactivate</input>
		<input type="submit" value="Go" class="alt_btn" onclick="return checkChosenExam()">
	</form>
</div>
	

	<!-- end of post new article -->
	<form method="post" action="AddAndEditExamServlet?type=Real">
	<article class="module width_full">
		<header>
			<h3>New Live Exam Form</h3>
		</header>
		<div class="module_content">
			<fieldset><label>Exam Name</label> <input type="text" name="examName" id="examName">
			</fieldset>
		<fieldset style="width: 48%; float: left; margin-right: 3%;">
		<label>Duration (in Minutes)</label> <input style="width: 92%;"
			type="text" name="examDuration" id="examDuration"></fieldset>
		<fieldset style="width: 48%; float: left;"><label>Passing
		Grade (0 to 100)</label> <input style="width: 92%;" type="text" name="examPassing" id="examPassing"></fieldset>
		<div class="clear"></div>		
		
		<div class="tablemodule2" style="max-height: 400px; overflow: auto;">
			<h5>Questions <div style="">Search: <input name="filt" onKeyUp="filter2(this, 'questionTable', '1')" type="text"></div></h5>
			<table id="questionTable" class="tablesorter" cellspacing="0">
				<thead>
					<tr>
						<th>ID</th>
						<th>Question</th>
						<th>Category</th>
						<th>Type</th>
						<th>Answer</th>
						<th>Choices</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${questions}" var="questionObj">
					<tr onclick="multiplehighlight_6(this, objinput, questionsRow)">
						<td><c:out value="${questionObj.questionID }"/> </td>
						<td><c:out value="${questionObj.question }"/></td>
						<td><c:out value="${questionObj.category}"/></td>
						<td>
						<c:choose>
							<c:when test="${questionObj.getClass().getSimpleName() eq 'MultipleChoice'}">
								Multiple Choice
							</c:when>
							<c:otherwise>
								True or False
							</c:otherwise>
						</c:choose>
						</td>
						<td> <c:out value="${questionObj.answer }"/> </td>
						<td>
							<c:forEach items="${questionObj.choices}" var="choices" varStatus="i" >
							
								<c:choose>
									<c:when test="${questions.size() eq i.count}">
										<c:out value="${ choices }" />
									</c:when>
									<c:otherwise>
										<c:out value="${choices}," />
									</c:otherwise>
								</c:choose>
														
							</c:forEach>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
			<input type="hidden" id="getid" value="0" name="examQuestions"/>
        	<script>var objinput = document.getElementById("getid");</script>
		</div>
		<a href="Questions.jsp">Do you wish to add more questions?</a>
		<div class="spacer"></div>
		<div class="clear"></div>
		
		<div class="tablemodule2" style="max-height: 400px; overflow: auto;">
			<h5>Examinees <div style="">Search: <input name="filt" onKeyUp="filter2(this, 'studentTable', '1')" type="text"></div></h5>
			<table class="tablesorter" id = "studentTable" cellspacing="0">
				<thead>
					<tr>
						<th>Examinee ID</th>
						<th>Last Name</th>
						<th>First Name</th>
						<th>Username</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${sessionScope.professor.students }" var="student">
					<tr onclick="multiplehighlight_4(this, objinput2, studentsRow )">
						<td><c:out value="${student.userID }" /></td>
						<td><c:out value="${student.lastName }" /></td>
						<td><c:out value="${student.firstName }" /></td>
						<td><c:out value="${student.username }" /></td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
			<input type="hidden" id="getid2" value="0" name="examStudents"/>
        	<script>var objinput2 = document.getElementById("getid2");</script>
		</div>
		<a href="Student_New.jsp">Do you wish to add more students?</a>
		<div class="spacer"></div>
		<div class="clear"></div>
		
		</div>
		<footer>
		<div class="submit_link"> <input type="submit" value="Create Exam" class="alt_btn" onclick="return checkForm()"> 
			<input	type="button" onclick="resetNewLiveExamForm()" value="Reset"></div>
		</footer>
	</article>
	</form>
	<!-- end of post new article -->



<div class="spacer"></div>
</section>


</body>

</html>